/**index.wxss**/
.container {
  display: block;
  padding: 0 20rpx;
  margin: 0;
}

.messageFrame {
  padding: 15rpx 0;
  overflow: hidden;
}

.rosterInfo {
  height: 100rpx;
}
.messageFrame .rosterInfo .avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
}
.messageFrame .rosterInfo .username {
  color: #000;
  font-size: 28rpx;
  margin-top: 10rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding-left: 10rpx;
}

.messageFrame .contentFrame {
  padding: 10rpx 100rpx;
  overflow: hidden;
}

.messageFrame .contentFrame .c_content {
  max-width: 400rpx;
  border-radius: 10rpx;
  padding: 15rpx 25rpx;
  line-height: 35rpx;
  font-size: 30rpx;
}
.self .rosterInfo .avatar {
  float: right;
}
.self .rosterInfo .username {
  float: right;
  padding-right: 10rpx;
}

.roster .rosterInfo .avatar {
  float: left;
}
.roster .rosterInfo .username {
  float: left;
}

.self .c_content {
  float: right;
  background: #f7eb5c;
  border: 1px solid #f7eb5c;
}
.roster .c_content {
  float: left;
  background: #fff;
  border: 1px solid #d9d9d9;
}
.c_content .cimage {
  max-width: 400rpx;
  max-height: 300rpx;
}
.notice_frame {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #83898f;
  font-size: 14rpx;
}
.time {
  font-size: 18rpx;
  text-align: center;
  color: #aaa;
}
